import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import apiService from '../utils/api.js'
import SongsManagement from '../components/SongsManagement.jsx'
import CategoriesManagement from '../components/CategoriesManagement.jsx'
import PlaylistsManagement from '../components/PlaylistsManagement.jsx'
import ArtistsManagement from '../components/ArtistsManagement.jsx'
import AlbumsManagement from '../components/AlbumsManagement.jsx'
import '../styles/pages.css'

function Admin() {
  const navigate = useNavigate()
  const [activeTab, setActiveTab] = useState('songs') // 'songs' 或 'categories' 或 'playlists' 或 'artists' 或 'albums'

  // 检查是否为管理员
  useEffect(() => {
    const checkAdminPermission = () => {
      const user = apiService.getCurrentUser()
      // 简单验证，实际项目中应该有更严格的管理员权限验证
      if (!user) {
        navigate('/login')
        return
      }
      console.log('当前用户:', user)  
       if (user && !user.isAdmin) {
        navigate('/library')
      }
    }

    checkAdminPermission()
  }, [navigate])

  return (
    <div className="admin-page">
      <div className="section-header">
        <h2>管理中心</h2>
        
        {/* 标签页切换 */}
        <div className="admin-tabs">
          <button 
            className={`tab-btn ${activeTab === 'songs' ? 'active' : ''}`}
            onClick={() => setActiveTab('songs')}
          >
            歌曲管理
          </button>
          <button 
            className={`tab-btn ${activeTab === 'categories' ? 'active' : ''}`}
            onClick={() => setActiveTab('categories')}
          >
            分类管理
          </button>
          <button 
            className={`tab-btn ${activeTab === 'playlists' ? 'active' : ''}`}
            onClick={() => setActiveTab('playlists')}
          >
            歌单管理
          </button>
          <button 
            className={`tab-btn ${activeTab === 'artists' ? 'active' : ''}`}
            onClick={() => setActiveTab('artists')}
          >
            歌手管理
          </button>
          <button 
            className={`tab-btn ${activeTab === 'albums' ? 'active' : ''}`}
            onClick={() => setActiveTab('albums')}
          >
            专辑管理
          </button>
        </div>
      </div>
      
      {/* 各个管理模块的内容 - 使用组件 */}
      {activeTab === 'songs' && <SongsManagement />}
      {activeTab === 'categories' && <CategoriesManagement />}
      {activeTab === 'playlists' && <PlaylistsManagement />}
      {activeTab === 'artists' && <ArtistsManagement />}
      {activeTab === 'albums' && <AlbumsManagement />}
    </div>
  )
}

export default Admin